<template>
  <div class="commission-config">
    <el-form label-width="160px">
      <el-form-item v-for="item in configData" :key="item.id" :label="item.label">

        <!-- 根据不同类型渲染不同的表单控件 -->
        <template v-if="item.value_type === 'decimal'">
          <el-input-number v-model="form[item.code]" :precision="2" :step="getStep(item.code)" :min="0" />
        </template>

        <template v-else-if="item.value_type === 'int'">
          <el-input-number v-model="form[item.code]" :step="1" :min="0" />
        </template>

        <template v-else-if="item.value_type === 'varchar'">
          <el-input v-model="form[item.code]" />
        </template>

        <template v-else-if="item.value_type === 'bool'">
          <el-radio-group v-model="form[item.code]">
            <el-radio :label="0">否</el-radio>
            <el-radio :label="1">是</el-radio>
          </el-radio-group>
        </template>

        <template v-else-if="item.value_type === 'date'">
          <el-date-picker v-model="form[item.code]" type="date">
          </el-date-picker>
        </template>

        <template v-else-if="item.value_type === 'datetime'">
          <el-date-picker v-model="form[item.code]" type="datetime">
          </el-date-picker>
        </template>
        <template v-else-if="item.value_type === 'json'">
          <el-checkbox-group v-model="form[item.code]">
            <el-checkbox label="new_car">新车</el-checkbox>
            <el-checkbox label="used_car">二手车</el-checkbox>
            <el-checkbox label="maintenance">维保</el-checkbox>
            <el-checkbox label="lease">租赁</el-checkbox>
            <el-checkbox label="tea">茶饮</el-checkbox>
            <el-checkbox label="food">餐饮</el-checkbox>
            <el-checkbox label="hotel">酒店</el-checkbox>
            <el-checkbox label="other">其他</el-checkbox>
          </el-checkbox-group>
        </template>
        <!-- 描述信息 -->
        <div class="form-tip">注:{{ item.describe }}</div>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  props: {
    configData: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      form: {}
    }
  },
  created() {
    this.initForm()
  },
  methods: {
    initForm() {
      this.configData.forEach(item => {
        this.$set(this.form, item.code, item.value)
        // this.$set(this.form, item.code, parseFloat(item.value))
      })
    },
    getFormData() {
      return Object.keys(this.form).map(code => {
        const originalItem = this.configData.find(item => item.code === code)
        return {
          id: originalItem.id,
          // code,
          value: this.form[code], //this.form[code].toString(),
          // value_type: originalItem.value_type
        }
      })
    },
    // 根据字段代码获取步长
    getStep(code) {

      const decimalMap = {
        'point_exchange_rule': 0.01,
      }
      return decimalMap[code] || 1
    },
  }
}
</script>

<style scoped lang="scss">
.form-tip {
  font-size: 12px;
  color: #999;
  /* margin-top: 5px; */
}
</style>